﻿<style>
    .layui-table-cell {
        height: 55px;
        font-size: 0.88em;
    }

    .layui-table td img {
        width: 55px;
    }

    .fontview {
        font-weight: 600;
        color: #3384b2;
        text-decoration: underline;
        cursor: pointer;
    }
    
    .jgsp{
        color:#c2c2c2;
        font-weight:bold;
        cursor:pointer;
    }
    .font1 {
        font-weight: 600;
    }

    .font2 {
        color: black;
    }

    .font3 {
        color: #9b9b9b;
    }

    .font4 {
        background: black;
        font-size: 0.8em !important;
    }
    .orders{
        cursor:pointer;
    }
    
    .xm-select-dl{
        width:460px !important;
    }
    .xm-select-linkage .xm-select-linkage-group li {
        height:24px;
        line-height:24px
    }
    .xm-select-linkage .xm-select-linkage-group li span{
       line-height:24px
    }
</style>

<script type="text/html" template>
    <title>{{layui.setter.MenuName}}-{{layui.setter.name}}</title>
</script>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <script type="text/html" template>
            <a><cite>{{layui.setter.MenuName}}</cite></a>
        </script>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="app-content-list">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">关键字</label>
                    <div class="layui-input-inline">
                        <input type="text" name="key" id="key" placeholder="名称/编码/品牌/关键字" autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-inline" style="width:240px;">
                        <select name="cateID" xm-select="cateID" xm-select-radio="" xm-select-search="" xm-select-skin="default">
                            <option value=""></option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <!--<label class="layui-form-label">配送方式</label>
                    <div class="layui-input-inline">
                        <select name='dMode' xm-select="dMode" id='dMode'>
                            <option value=""></option>
                        </select>
                    </div>-->
                    <!--<label class="layui-form-label">供应商</label>
                    <div class="layui-input-inline" style="width:240px;">
                        <select name='supplier' id='supplier' lay-search>
                            <option value=""></option>
                        </select>
                    </div>-->
                    <!--<label class='layui-form-label'>供应商</label>
                    <div class='layui-input-inline' style="width:240px;">
                        <select name="selsupplier" xm-select="selsupplier" xm-select-radio="" xm-select-search xm-select-skin="default">
                            <option value=""></option>
                        </select>
                        <input type="hidden" name="supplier" id="supplier">
                    </div>-->
                    <input type="checkbox" name="ship" lay-skin="switch" lay-filter="switchTest" lay-text="包邮|包邮">
                    <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                    <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-delete">
                        <i class="layui-icon layui-icon-delete layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <script type="text/html" template lay-url="{{ layui.setter.APIUrl }}/shop/goods_baseMgr/GetButtonRight?i=Pond" lay-type="post" lay-done="layui.data.setActive()">
                    {{ d.Data }}
                </script>
            </div>
            <table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
        </div>
    </div>
</div>
<script>

    var checkids = [];
    var GoodID = "";
    var GoodName = "";
    var SupplierID = "";

    var form, admin, table, view, formSelects, $;
    layui.use(['admin', 'table', 'form', 'formSelects'], function () {

        $ = layui.$;
        admin = layui.admin;
        view = layui.view;
        table = layui.table;
        form = layui.form;
        formSelects = layui.formSelects;

        form.render(null, 'app-content-list');

        formSelects.config('cateID', {
            keyName: 'title',            //自定义返回数据中name的key, 默认 name
            keyVal: 'id',            //自定义返回数据中value的key, 默认 value
            keyChildren: 'children',    //联动多选自定义children
        });

        admin.req({
            url: layui.setter.APIUrl + '/shop/GoodsCategoryMgr/customerQueryChildren', //实际使用请改成服务端真实接口
            type: 'post',
            done: function (res) {
                layui.formSelects.data('cateID', 'local', {
                    arr: res.Data,
                });
            }
        });
        //这里也算是给自己挖了一手好坑吧, 简单的一种处理方式, 在多选第一次打开的时候收缩所有的子节点, 目前处理的很粗鲁, 就是为了一种效果, 收缩全部节点
        var isFirst = true;
        layui.formSelects.opened('cateID', function (id) {
            if (isFirst) {
                isFirst = false;
                $('[fs_id="cateID"]').find('.xm-cz i.icon-caidan').click();
            }
        });

        formSelects.config('dMode', {
            keyName: 'Text',            //自定义返回数据中name的key, 默认 name
            keyVal: 'PID',            //自定义返回数据中value的key, 默认 value
        });
        layui.formSelects.data('dMode',
            'local',
            {
                arr: [{ 'Text': '自提', 'PID': '0' }, { 'Text': '快递', 'PID': '1' }],//要把自己的这个节点去掉
            });

        //admin.req({
        //    url: layui.setter.APIUrl + '/shop/SupplierMgr/customerQuery', //实际使用请改成服务端真实接口
        //    type: 'post',
        //    done: function (res) {
        //        var html = "<option value=''></option>";
        //        layui.each(res.Data, function (index, eachdata) {
        //            html += "<option value='" + eachdata.PID + "'>" + eachdata.Name + "</option>";
        //        });
        //        $("#supplier").html(html);
        //        form.render('select');
        //    }
        //});

        formSelects.config('selsupplier', {
            keyName: 'title',            //自定义返回数据中name的key, 默认 name
            keyVal: 'id',            //自定义返回数据中value的key, 默认 value
            keyChildren: 'children',    //联动多选自定义children
        });

        admin.req({
            url: layui.setter.APIUrl + '/shop/supplierMgr/customerQueryChildren2', //实际使用请改成服务端真实接口
            type: 'post',
            done: function (res) {
                layui.formSelects.data('selsupplier', 'local', {
                    arr: res.Data,
                    linkage: true,
                    linkageWidth: 100
                });
            }
        });
        formSelects.on('selsupplier', function (id, vals, val, isAdd, isDisabled) {
            if (isAdd == true) {
                if (val.value.indexOf("/") > 0 && ((val.value.split('/')).length - 1) >= 2) {  //多级选择时,第一级无法选中  供应商前两级都无法选中
                    var value = val.value.split('/')[val.value.split('/').length - 1];
                    $("#supplier").val(value);  //实际选中效果为多个ID组合 ‘id1/id2/id3’,取最后一个
                } else {
                    isAdd = false;
                    return false;
                }
            } else {
                $("#supplier").val("");
            }
        });


        form.on('switch(switchTest)', function (data) {
            var field = form.val("app-content-list");
            field["ship"] = data.elem.checked;
            //执行重载
            table.reload('LAY-app-content-list', {
                where: field,
                page: {
                    curr: 1 //重新从第1页开始
                }
            });
        });


        var varButtonRight = "";
        //文章管理
        table.render({
            elem: '#LAY-app-content-list'
            , toolbar: true  //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , defaultToolbar: ['filter']
            , method: "post"
            , url: layui.setter.APIUrl + '/shop/goods_baseMgr/listPain?listType=1'
            , headers: { //通过 request 头传递
                Authorization: "bearer " + layui.data('layuiAdmin').access_token
            }
            , parseData: function (res) { //res 即为原始返回的数据 
                varButtonRight = res.Data.ButtonRight;
                return {
                    "ResultCode": res.ResultCode, //解析接口状态
                    "ResultInfo": res.ResultInfo, //解析提示文本
                    "count": res.Data.TotalRecordCount, //解析数据长度
                    "Data": res.Data.Items //解析数据列表 
                };
            }
        , cols: [[
      { type: 'checkbox', fixed: 'left', field: 'PID' }, //sort: true  //hide: true //  width:100        
		//{
		//    field: 'Code', title: '商品编码/货号', width: 130, templet: function (d) {
		//        var html = "编码:<span class='font1'>" + d.Code + "</span>";
		//        html += "<br />货号:<span class='font1'>" + d.ArtNo + "</span>";
		//        return html;
		//    }
		//},
		{
		    field: 'Code', title: '商品编码', minWidth: 100, templet: function (d) {
		        var html = "<span class='fontview' lay-event=\"view\" title='点击查看商品详情'>" + d.Code + "</span>";
		        return html;
		    }
		},
		{ field: 'ArtNo', title: '货号', minWidth: 100 },
		{ field: 'GoodsCategoryID_SelSourceName', title: '分类 <span class="orders" onclick="orders(3)" title="分类名称排序">⬇</span>', minWidth: 80 },
		{
		    field: 'Name', title: '名称<br/>副标题', minWidth: 320, templet: function (d) {
		        if (d.Title == null) d.Title = "";
		        var html = "<span class='font2'>" + d.Name + "</span>";
		        html += "<br /><span class='font3'>" + d.Title + "</span>";
		        return html;
		    }
		},
		{
		    field: 'Path_Upload', title: '封面', templet: function (d) {
		        var html = "<img src=" + layui.setter.ImgPath + d.Path_Upload + " alt='' />";
		        return html;
		    }, width: 90
		},
		{
		    field: 'SpecMode', title: '规格<br/>重量(kg)', minWidth: 100, templet: function (d) {
		        if (d.Title == null) d.Title = "";
		        var html = "规格：<span class='font1'>" + d.SpecMode + "</span>";
		        html += "<br />重量：<span class='font1'>" + d.Weight + "</span>";
		        return html;
		    }
		},
		//{
		//    field: 'DeliveMode', title: '配送方式<br/>是否包邮', minWidth: 100, templet: function (d) {
		//        var html = "<div>";
		//        var str = "";
		//        var ship = "";
		//        if (d.DeliveMode.indexOf("0") >= 0) {
		//            str = "自提";
		//        }
		//        if (d.DeliveMode.indexOf("1") >= 0) {
		//            if (str != "") str += "、";
		//            str += "快递";
		//            if (d.IsShipping_Sel == 1) {
		//                ship += "<span style='color:#5FB878;font-weight:bold'>包邮</span>";
		//            }
		//        }
		//        html += "<span style='color:#01AAED;font-weight:bold'>" + str + "</span>";
		//        if (ship != "") {
		//            html += "<br />" + ship;
		//        }
		//        html += "</div>";
		//        return html;
		//    }
		//},
		{
		    field: 'Price', title: '价格(元)<br /><span class="orders" onclick="orders(1)" title="价格降序">⬇</span> <span class="orders" onclick="orders(2)" title="价格升序">⬆</span>', width: 90,
		    templet: function (d) {
		        var html = "<span style='color:#FF5722;font-weight:bold;'>￥</span><span style='color:#FF5722;font-weight:bold;font-size:1.1em'>" + d.Price + "</span>";
		        if (d.DisLables != "" && d.DisLables != null) {
		            var str = encodeURI(d.DisLables);
		            html += "<br /><span class='jgsp' id='jg" + d.Code + "' onclick=\"LookMemberPrice('" + str + "', '" + d.Code + "')\">....</span>";
		        }
		        return html;
		    }
		},
		//{
		//    field: 'Stock', title: '库存', width: 70, templet: function (d) {
		//        var html = "<span style='font-weight:bold;font-size:1.1em'>" + d.Stock + "</span>";
		//        return html;
		//    }
		//},
		//{
		//    field: 'LimitNum', title: '限购数量', width: 80, templet: function (d) {
		//        if (d.LimitNum <= 0) d.LimitNum = "无";
		//        var html = "<span style='font-weight:bold;font-size:1.1em'>" + d.LimitNum + "</span>";
		//        if (d.LimitArea != null && d.LimitArea != "") {
		//            var str = encodeURI(d.LimitArea);
		//            html += "<br /><span class='jgsp' id='area" + d.Code + "' onclick=\"LookLimitArea('" + str + "', '" + d.Code + "')\">....</span>";
		//        }
		//        return html;
		//    }
		//},
		{
		    field: 'SupplierID_SelSourceName', title: '供应商', minWidth: 180, templet: function (d) {
		        var html = "";
		        html += "<span style='color:black;'>" + d.SupplierLevel + "</span>";
		        html += "<span style='color:black;'> " + d.SupplierArea + "</span>";
		        html += "<span> " + d.SupplierID_SelSourceName + "</span>";
		        return html;
		    }
		},
      {
          title: '操作', width: 80, fixed: 'right', align: 'center', templet: function (d) {
              var strRtn = "";
              if (varButtonRight.indexOf('view') >= 0) {
                  strRtn += "<a class=\"layui-btn layui-btn-primary layui-btn-xs\" lay-event=\"view\">查看</a> ";
              }
              return strRtn;
          }
      }
        ]]
        , page: true
        , limit: 10
        , limits: [10, 15, 20, 25, 30]
        , text: {
            none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增 text: '对不起，加载出现异常！'
        }
        });

        //监听工具条
        table.on('tool(LAY-app-content-list)', function (obj) {
            //debugger;
            var data = obj.data;
            if (obj.event === 'view') {
                admin.popup({
                    title: '查看信息'
                , area: ['80%', '96%']
                 , id: 'LAY-popup-content-view'
                 , success: function (layero, index) {
                     view(this.id).render('/shop/shop_goods_base/view', data).done(function () {
                         form.render(null, 'layuiadmin-app-form-list');
                         //监听提交
                         form.on('submit(layuiadmin-app-form-submit)', function (data) {
                             layer.close(index); //执行关闭
                         });
                     });
                 }
                });
            }
        });

        //监听搜索
        form.on('submit(LAY-app-contlist-search)', function (data) {
            var field = data.field;
            //执行重载
            table.reload('LAY-app-content-list', {
                where: field,
                page: {
                    curr: 1 //重新从第1页开始
                }
            });
        });

        form.on('submit(LAY-app-contlist-delete)', function (data) {
            $("#key").val("");
            layui.formSelects.value('cateID', []);
            layui.formSelects.value('dMode', []);
            layui.formSelects.value('selsupplier', []);
            $("#supplier").val('');
            form.render('select');

            var field = data.field;
            field.key = "";
            field.cateID = "";
            field.dMode = "";
            field.supplier = "";
            field["Order"] = "";
            //执行重载
            table.reload('LAY-app-content-list', {
                where: field,
                page: {
                    curr: 1 //重新从第1页开始
                }
            });
        });
    });

    layui.data.setActive = function () {

        layui.use(['form', 'admin', 'table'], function () {
            var $ = layui.$;
            var form = layui.form;
            var admin = layui.admin;
            var view = layui.view;
            var table = layui.table;
            var active = {
                //选品上架
                sel: function (othis) {
                    var checkStatus = table.checkStatus('LAY-app-content-list')
                    , checkData = checkStatus.data; //得到选中的数据

                    if (checkData.length === 0) {
                        return layer.msg('请选择数据');
                    }
                    checkids = [];
                    $.each(checkData, function (index, eobj) {
                        checkids.push(eobj.PID);
                    });
                    admin.popup({
                        title: '选品上架'
                      , skin: 'layui-layer-lan'
                      , area: ['50%', '60%']
                      , zIndex: 1002
                      , id: 'LAY-popup-content-add'
                      , success: function (layero, index) {
                          view(this.id).render('/shop/shop_goods_base/Upper').done(function () {
                              //form.render(null, 'layuiadmin-app-form-list');

                          });
                      }
                    });
                },
                //选品到店铺
                tostore: function (othis) {
                    var checkStatus = table.checkStatus('LAY-app-content-list')
                    , checkData = checkStatus.data; //得到选中的数据

                    if (checkData.length === 0) {
                        return layer.msg('请选择数据');
                    }
                    if (checkData.length > 1) {
                        return layer.msg('请勿多选');
                    }
                    GoodID = checkData[0].PID;
                    GoodName = checkData[0].Name;
                    SupplierID = checkData[0].SupplierID_SelSource;
                    admin.popup({
                        title: '选品到店铺'
                      , skin: 'layui-layer-lan'
                      , area: ['72%', '88%']
                      , zIndex: 1002
                      , id: 'LAY-popup-content-UpperToStore'
                      , success: function (layero, index) {
                          view(this.id).render('/shop/shop_goods_base/UpperToStore').done(function () {
                              //form.render(null, 'layuiadmin-app-form-list');

                          });
                      }
                    });
                }
            };

            $('.layui-btn.layuiadmin-btn-list').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    }


    function orders(xh) {
        layui.use(['form', 'admin', 'table'], function () {
            var $ = layui.$;
            var form = layui.form;
            var admin = layui.admin;
            var table = layui.table;

            var field = form.val("app-content-list");
            field["Order"] = xh;
            //执行重载
            table.reload('LAY-app-content-list', {
                where: field,
                page: {
                    curr: 1 //重新从第1页开始
                }
            });
        });
    }


    function LookMemberPrice(priceEnCode, code) {
        var str = decodeURI(priceEnCode);
        var Prices = JSON.parse(str);
        var content = "";
        layui.$.each(Prices, function (i, d) {
            if (content != "") {
                content += "<br />";
            }
            content += d.LevelStr + "：￥" + d.Price;
        })
        layer.tips(content, '#jg' + code, {
            tips: [1, '#5FB878'],
            time: 4000
        });
    }

    function LookLimitArea(strEnCode, code) {
        var str = decodeURI(strEnCode);
        var content = "限购区域：<br />" + str;
        layer.tips(content, '#area' + code, {
            tips: [1, '#5FB878'],
            time: 4000
        });
    }

</script>
